<template>
  <view class="container">
    <!-- 通知栏区域 -->
    <view class="notice-section">
      <uni-section title="词汇训练营" subTitle="每日进步一点点" type="line">
        <uni-notice-bar 
          show-icon 
          scrollable 
          text="问题反馈邮箱:xuihyr@qq.com"
          color="#4CAF50"
          background-color="#F8F9FA"
        />
      </uni-section>
    </view>

    <!-- 主内容卡片 -->
    <view class="content-card">
      <navigator 
        url="/pages/xmqk/xmqk" 
        class="book-selector"
        hover-class="selector-hover"
      >
        <uni-icons type="folder" size="18" color="#fff" />
        <text class="selector-text">选择单词本</text>
      </navigator>

      <!-- 图片区域 -->
      <view class="cover-container">
        <image 
          :src="`https://env-00jxtferg5zy.normal.cloudstatic.cn/img/n${id}.png`"
          class="book-cover"
          mode="aspectFit"
          @load="handleImageLoad"
          
        />
        <view class="skeleton-cover" >
          <uni-load-more status="loading" color="#4CAF50" />
        </view>
      </view>

      <!-- 操作按钮 -->
      <button 
        @click="goto" 
        class="start-button"
        :class="{ 'button-disabled': !id }"
        :disabled="!id"
      >
        开始斩词
        <uni-icons type="forward" size="18" color="#fff" />
      </button>
    </view>
  </view>
</template>

<script setup>
	const id = ref()
	import {
		onLoad,
		onShareAppMessage
	} from "@dcloudio/uni-app"
	import {
		ref
	} from "vue";
	const value = uni.getStorageSync('id');
	
	onLoad((e) => {

		if(value){
			
			
			id.value = value
			uni.setStorageSync('id', id.value);
		}else {
			id.value = e.id
		
			uni.setStorageSync('id', id.value);
		}

		

	})

	onShareAppMessage(()=>{
		
	})
	function goto() {
		
		
		if (id.value) {
			uni.navigateTo({
				url: `/pages/word/word?id=${id.value}`
			})
		} else {
			uni.showToast({
				title: "请您先选择词本",
				icon: "none"
			})
		}
	}
</script>

<style lang="scss">
/* 设计变量 */
$primary-color: #4CAF50;
$secondary-color: #81C784;
$shadow-default: 0 8rpx 30rpx rgba(0,0,0,0.08);

.container {
  min-height: 100vh;
  padding: 40rpx;
  background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
}

.notice-section {
  margin-bottom: 60rpx;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: $shadow-default;
}

.content-card {
  position: relative;
  background: #fff;
  border-radius: 32rpx;
  padding: 60rpx 40rpx;
  box-shadow: $shadow-default;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60rpx;
}

.book-selector {
  width: 60%;
  height: 80rpx;
  background: linear-gradient(90deg, $primary-color, $secondary-color);
  border-radius: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
  transition: all 0.2s ease;

  .selector-text {
    color: #fff;
    font-size: 32rpx;
    font-weight: 500;
  }
}

.selector-hover {
  transform: translateY(-2rpx);
  box-shadow: 0 4rpx 12rpx rgba($primary-color, 0.3);
}

.cover-container {
  width: 500rpx;
  height: 400rpx;
  border-radius: 24rpx;
  overflow: hidden;
  background: #F8F9FA;
  
  .book-cover {
    width: 100%;
    height: 100%;
    transition: transform 0.3s;
    
    &:active {
      transform: scale(0.98);
    }
  }
}

.skeleton-cover {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.start-button {
  width: 80%;
  height: 100rpx;
  line-height: 100rpx;
  background: linear-gradient(90deg, $primary-color, $secondary-color);
  border-radius: 48rpx;
  color: #fff;
  font-size: 36rpx;
  font-weight: 500;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20rpx;
  transition: all 0.2s ease;

  &::after {
    display: none;
  }

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 2rpx 6rpx rgba($primary-color, 0.3);
  }
}

.button-disabled {
  opacity: 0.7;
  filter: grayscale(0.5);
}
</style>